<template>
  <div class="todo-list" :style="{ height: height + 'px' }">
    <div class="todo-list-addbtn">
      <el-input
        size="small"
        v-model="taskTitle"
        @keypress.enter.native="newTesk"
      >
        <el-button slot="append" icon="iconfont icon-task" @click="newTesk" />
      </el-input>
    </div>
    <div class="todo-list-showsuccess">
      <label>
        <el-checkbox v-model="notFinished" style="margin-right:5px;" />
        只显示未完成
      </label>
    </div>

    <div
      class="todo-list-body scrollbar"
      :style="{ height: height - 100 + 'px' }"
    >
      <todo-item
        v-for="item in getList"
        :key="item.id"
        :id="item.id"
        :priority="item.priority"
        :title="item.title"
        :remarks="item.remarks"
        :tags="item.tags"
        :time="item.time"
        :leader="item.leader"
        :finished="item.finished"
        :type="item.type"
        @click="itemClick"
        @setFinished="setItemFinished"
      />
    </div>
    <el-dialog
      title="创建任务"
      :visible.sync="createTask"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
    >
      <task-form @ok="taskOk" v-model="taskForm" />
    </el-dialog>
  </div>
</template>

<script>
import TodoItem from "./TodoItem";
import TaskForm from "./TaskForm";
export default {
  components: { TodoItem, TaskForm },
  data() {
    return {
      taskForm: {},
      createTask: false,
      taskTitle: "",
      notFinished: true,
      height: document.documentElement.clientHeight - 50,
    };
  },
  computed: {
    getList() {
      return this.notFinished
        ? this.$store.getters.getTodoListNotFinished
        : this.$store.state.todoList;
    },
  },
  methods: {
    itemClick(data) {
      console.log(data)
      this.taskForm = data;
      this.createTask = true;
    },
    setItemFinished(id, value) {
      this.$store.commit("setTodoFinished", { id: id, value: value });
    },
    newTesk(e) {
      this.taskForm = {
        title: this.taskTitle,
        finished: false,
        priority: "4",
        time: new Date(
          Date.parse(this.$moment().format("yyyy-MM-DD") + " 18:00")
        ),
        type: "task",
      };
      if (this.taskTitle == "") {
        this.createTask = true;
      } else {
        this.$api.save("todo", this.taskForm).then((data) => {
          this.$store.commit("pushTodoList", this.taskForm);
          this.taskTitle = "";
        });
      }
    },
    taskOk(task, createTask) {
      this.createTask = createTask;
      console.log(task, createTask);
    },
  },
  mounted() {
    const self = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        self.height = window.fullHeight - 50;
      })();
    };
    if (this.$store.state.todoList.length == 0) {
      this.$api.find('todo',"todo", {
          _mock: {
            id: "@id",
            "priority|1": ["1", "2", "3", "4"],
            title: "@ctitle",
            remarks: "@cparagraph",
            finished: "@boolean",
            "tags|0-10": ["@ctitle"],
            time:'@datetime',
            executor:'',
            executorName:'',
            "leader|1": ["@id",undefined],
            "type|1": ["task", "todo", "system", "approval"],
          },
        })
        .then((data) => {
          console.log(data);
          this.$store.commit("setTodoList", data.result.rows);
        });
      // this.$store.commit("setTodoList", [{id:'1',priority:'1',title:'test',remarks:'12321',finished:false,time:this.$moment().format('yyyy-MM-DD HH:ss'),type:'todo'}])
    }
  },
};
</script>

<style lang="less" scoped>
.todo-list {
  padding: 5px 0px;
  background-color: #ececec;
  overflow-x: hidden;
  overflow-y: auto;
}
.todo-list-addbtn {
  margin-top: 5px;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  span {
    margin-left: 5px;
  }
}
.todo-list-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0px 10px;
}
.todo-list-showsuccess {
  font-size: 12px;
  text-align: right;
  color: #606266;
  label {
    margin-right: 10px;
    cursor: pointer;
    color: #409eff;
  }
}
</style>
